<template>
    <div class = "baseaccountadd" v-loading = 'loading'>
           <el-container>
        <el-container>
        <el-main>
            <el-breadcrumb separator="/" style="padding-bottom:15px;">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" :to="{ path: 'Addbase' }">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item  style="font-weight: bold;cursor:pointer" @click.native = "goBack">账户管理</el-breadcrumb-item>
                <el-breadcrumb-item  @click.native = "goBack">新增</el-breadcrumb-item>
              </el-breadcrumb>
             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item  label="账号" prop="account">
                <el-input
                :rows="3"
                placeholder="请输入账号"
                v-model="ruleForm.account">
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                :rows="3"
                placeholder="请输入密码"
                v-model="ruleForm.password">
                </el-input>
            </el-form-item>
            <el-form-item  label="姓名" prop="name">
                <el-input
                :rows="3"
                placeholder="请输入姓名"
                v-model="ruleForm.name">
                </el-input>
            </el-form-item>
            <el-form-item  label="联系方式" prop="phone">
                <el-input
                type="number"
                :rows="3"
                placeholder="请输入联系方式"
                v-model="ruleForm.phone">
                </el-input>
            </el-form-item>
            <el-form-item label="性别" prop = "gender">
                <el-select v-model="ruleForm.gender" placeholder="请选择性别">
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                   >
                  </el-option>
                </el-select>
            </el-form-item> 
            <!-- <el-form-item label="类型" prop = "value" v-if = "Boole === 0">
                <el-select v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in optionsone"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                   >
                  </el-option>
                </el-select>
            </el-form-item>  -->
            <el-form-item>
            <el-button  type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
        </el-form>
        </el-main>
        </el-container>
         </el-container>
    </div>
</template>
<script>
export default {
    data(){
        var validateaccount = (rule, value, callback) => {
        if (value ==='') {
          callback(new Error('请输入账号'));
        } else {
          callback();
        }
      };
      var validatepassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var validategender = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择性别'));
        } else {
          callback();
        }
      };
      var validatename = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
      var validatephone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入联系方式'));
        } else {
          callback();
        }
      };
        return{
            Top:'',
            loading:false,
            form:{},
            ruleForm: {
            account:'',
            password:'',
            gender:'',
            name:'',
            phone:'',
            baseId:''
            },
            options: [{
            value: 'BOY',
            label: '男',
            }, {
            value: 'GIRL',
            label: '女'
            }],
            // optionsone: [{
            // value: 'base',
            // label: '管理员',
            // }, {
            // value: 'scenic_spot',
            // label: '基地管理员'
            // }],
            rules:{
            account: [
                { validator: validateaccount, trigger: 'blur' }
            ],
            password: [
                { validator: validatepassword, trigger: 'blur' }
            ],
            gender:[
                { validator: validategender, trigger: 'blur' }
            ],
            name:[
                { validator: validatename, trigger: 'blur' }
            ],
            phone:[
                { validator: validatephone, trigger: 'blur' }
            ]
            },
            api:'',
        }
    },
    created(){
        this.List()
    },
    methods:{
        List(){
            this.loading = true
            //获取加密公钥
            this.$api.publickey.key().then(res => {
                this.api = res.data
            }).catch(err => {
                this.$message.error(err); //登录失败提示错误
            });
            this.baseId = this.$route.query.item
            if(this.form){
                this.Top = '新增'
            }
            this.loading = false
        },
        //后退
        goBack(){
            this.$router.push({path:'baseaccount',query:{form:this.baseId}})
        },
        //提示
        open1(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
      },
      //修改
      submitFormone(){

      },
      //添加
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
            this.loading = true
            //调用min.js中的加密方法进行加密再返回
            let data = this.$getCode(this.ruleForm.password,this.api)
            let Add = {
                account:this.ruleForm.account,
                password:data,
                gender:this.ruleForm.gender,
                name:this.ruleForm.name,
                phone:this.ruleForm.phone,
                baseId:this.baseId
            }
            this.$api.Basetoaddordelete.Basemanageradd(Add).then(res => {
                switch(res.code){
                        case 200:
                        //登录成功之后重定向到首页
                        this.$router.push({ path: '/baseaccount',query:{form:this.baseId}});
                        this.open1('成功','添加成功','success')
                        this.loading = false
                        break
                        case 400:
                        this.open1('失败','用户名或密码错误','warning')
                        this.loading = false
                        case 4200: 
                        this.open1('失败','已存在该用户','warning')
                        this.loading = false
                        break 
                    }
            }).catch(err => {
                console.log(err)
                this.loading = false
            })
            } else {
                console.log('error submit!!');
                return false
            }
            })
        }
    }
}
</script>
<style scoped>

</style>
